<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI解读弹窗 - 基层AI辅助诊断系统</title>
    <!-- 引入Element Plus的样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- 引入Vue 3 -->
    <script src="https://unpkg.com/vue@3"></script>
    <!-- 引入Element Plus组件库 -->
    <script src="https://unpkg.com/element-plus"></script>
    <!-- 引入中文语言包 -->
    <script src="https://unpkg.com/element-plus/dist/locale/zh-cn.min.js"></script>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
            background: #FFFFFF;
            color: var(--text-primary);
            font-size: 14px;
            line-height: 1.5;
            margin: 0;
        }

        /* 色彩系统 - 基于HIS系统现代极简风设计规范 */
        :root {
            /* 主色调 */
            --primary: #0F6CBD;
            --primary-light: #D0E7FF;
            --primary-dark: #0A4F8D;
            
            /* 辅助色 */
            --success: #0F8A5F;
            --warning: #F59337;
            --error: #D13438;
            --info: #0078D4;
            
            /* 中性色 - 文字 */
            --text-primary: #1A1A1A;
            --text-secondary: #4D4D4D;
            --text-tertiary: #767676;
            --text-disabled: #A6A6A6;
            
            /* 中性色 - 边框与分割线 */
            --border-strong: #CCCCCC;
            --border-normal: #E0E0E0;
            --border-light: #F0F0F0;
            --divider: #F5F5F5;
            
            /* 中性色 - 背景 */
            --bg-primary: #FFFFFF;
            --bg-secondary: #F9F9F9;
            --bg-card: #FFFFFF;
            --bg-disabled: #F5F5F5;
            
            /* 医疗专业色 */
            --medical-critical: #B91C1C;
            --medical-abnormal: #F59E0B;
            --medical-normal: #10B981;
            --medical-pending: #3B82F6;
            --medical-completed: #9CA3AF;
            
            /* 间距系统 */
            --spacing-2: 2px;
            --spacing-4: 4px;
            --spacing-8: 8px;
            --spacing-12: 12px;
            --spacing-16: 16px;
            --spacing-24: 24px;
            --spacing-32: 32px;
            --spacing-40: 40px;
            --spacing-48: 48px;
            
            /* 字体大小 */
            --font-page-title: 20px;
            --font-card-title: 16px;
            --font-table-title: 14px;
            --font-body: 14px;
            --font-table: 13px;
            --font-small: 12px;
            
            /* 行高 */
            --line-height-title: 1.4;
            --line-height-body: 1.5;
            --line-height-table: 1.2;
            --line-height-form: 1.4;
            
            /* 圆角 */
            --radius-small: 2px;
            --radius-medium: 4px;
            
            /* 动画时间 */
            --transition-fast: 150ms;
            --transition-normal: 200ms;
            --transition-slow: 300ms;
        }

        /* 全屏弹窗样式 */
        .ai-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity var(--transition-normal) ease, visibility var(--transition-normal) ease;
        }

        .ai-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .ai-modal-container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ai-modal-content {
            width: 100%;
            height: 100%;
            background-color: var(--bg-primary);
            display: flex;
            flex-direction: column;
            transform: scale(0.95);
            transition: transform var(--transition-normal) ease;
        }

        .ai-modal-overlay.active .ai-modal-content {
            transform: scale(1);
        }

        .ai-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-16) var(--spacing-24);
            border-bottom: 1px solid var(--border-light);
        }

        .ai-modal-title {
            font-size: var(--font-card-title);
            font-weight: 600;
            color: var(--text-primary);
        }

        .ai-modal-close {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: var(--radius-small);
            transition: background-color var(--transition-fast);
        }

        .ai-modal-close:hover {
            background-color: var(--bg-secondary);
        }

        .ai-modal-close svg {
            width: 16px;
            height: 16px;
            color: var(--text-tertiary);
        }

        .ai-modal-body {
            flex: 1;
            padding: var(--spacing-24);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-24);
        }

        .ai-chat-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-16);
            overflow-y: auto;
        }

        .ai-message {
            margin-bottom: var(--spacing-16);
        }

        .ai-message-content {
            color: var(--text-secondary);
            line-height: var(--line-height-body);
        }

        .ai-message-list {
            margin-top: var(--spacing-8);
            margin-bottom: var(--spacing-8);
            padding-left: 0;
            list-style-type: none;
        }

        .ai-message-list li {
            margin-bottom: var(--spacing-8);
        }

        .ai-suggestion-title {
            font-size: var(--font-body);
            color: var(--text-tertiary);
            margin-bottom: var(--spacing-12);
        }

        .ai-suggestion-cards {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-8);
        }

        .ai-suggestion-card {
            padding: var(--spacing-12) var(--spacing-16);
            background-color: var(--bg-secondary);
            border-radius: var(--radius-small);
            color: var(--text-secondary);
            cursor: pointer;
            transition: background-color var(--transition-fast), color var(--transition-fast);
        }

        .ai-suggestion-card:hover {
            background-color: var(--primary-light);
            color: var(--primary);
        }

        .ai-divider {
            height: 1px;
            background-color: var(--border-light);
            margin: var(--spacing-16) 0;
        }

        .user-message {
            color: var(--text-primary);
            font-weight: 500;
        }

        .ai-input-container {
            display: flex;
            gap: var(--spacing-16);
            padding: var(--spacing-16) var(--spacing-24);
            border-top: 1px solid var(--border-light);
            background-color: var(--bg-primary);
        }

        .ai-input {
            flex: 1;
            padding: var(--spacing-8) var(--spacing-12);
            border: 1px solid var(--border-normal);
            border-radius: var(--radius-small);
            font-size: var(--font-body);
            color: var(--text-secondary);
            outline: none;
            transition: border-color var(--transition-fast);
        }

        .ai-input:focus {
            border-color: var(--primary);
        }

        .ai-send-btn {
            padding: var(--spacing-8) var(--spacing-16);
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: var(--radius-small);
            font-size: var(--font-body);
            font-weight: 500;
            cursor: pointer;
            transition: background-color var(--transition-fast);
        }

        .ai-send-btn:hover {
            background-color: var(--primary-dark);
        }

        .ai-send-btn:disabled {
            background-color: var(--bg-disabled);
            color: var(--text-disabled);
            cursor: not-allowed;
        }

        /* 加载动画 */
        .ai-loading {
            display: inline-flex;
            align-items: center;
            color: var(--text-tertiary);
        }

        .ai-loading::after {
            content: "...";
            animation: loading-dots 1.5s infinite;
            width: 24px;
            display: inline-block;
        }

        @keyframes loading-dots {
            0% { content: "."; }
            33% { content: ".."; }
            66% { content: "..."; }
        }
    </style>
</head>
<body>
    <div id="ai-interpretation-modal" class="ai-modal-overlay">
        <div class="ai-modal-container">
            <div class="ai-modal-content">
                <div class="ai-modal-header">
                    <h2 class="ai-modal-title">AI解读</h2>
                    <div class="ai-modal-close" id="modal-close-btn">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="18" y1="6" x2="6" y2="18"></line>
                            <line x1="6" y1="6" x2="18" y2="18"></line>
                        </svg>
                    </div>
                </div>
                <div class="ai-modal-body">
                    <div class="ai-chat-container" id="ai-chat-container">
                        <!-- AI初始总结 -->
                        <div class="ai-message">
                            <div class="ai-message-content">
                                <p>我已为您分析了《2025年高血压诊疗指南更新》的主要内容。</p>
                                <p>本文是2025年版高血压诊疗指南的更新版本，主要内容包括：</p>
                                <ul class="ai-message-list">
                                    <li>1. 更新了高血压诊断标准，将"正常高值"改为"高正常"</li>
                                    <li>2. 强调基层医疗机构的高血压管理策略</li>
                                    <li>3. 详细说明了标准化血压测量流程</li>
                                    <li>4. 提供了最新的高血压分级标准</li>
                                    <li>5. 更新了危险分层和治疗方案的建议</li>
                                </ul>
                            </div>
                        </div>

                        <!-- 预设问题 -->
                        <div class="ai-message">
                            <div class="ai-suggestion-title">您可能想了解的问题：</div>
                            <div class="ai-suggestion-cards">
                                <div class="ai-suggestion-card" data-question="高血压分级与治疗方案如何对应？">
                                    高血压分级与治疗方案如何对应？
                                </div>
                                <div class="ai-suggestion-card" data-question="基层医疗机构应如何进行高血压随访管理？">
                                    基层医疗机构应如何进行高血压随访管理？
                                </div>
                                <div class="ai-suggestion-card" data-question="高血压一线用药有哪些选择？">
                                    高血压一线用药有哪些选择？
                                </div>
                            </div>
                        </div>

                        <!-- 对话历史将在这里动态添加 -->
                    </div>
                </div>
                <div class="ai-input-container">
                    <input type="text" class="ai-input" id="ai-input" placeholder="请输入您的问题..." />
                    <button class="ai-send-btn" id="ai-send-btn">发送问题</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 此脚本内容已移至文章详情页面中，通过动态加载方式执行
        // 保留此文件作为独立查看时使用
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化弹窗
            const modal = document.getElementById('ai-interpretation-modal');
            if (modal && !window.parent.document.getElementById('ai-interpretation-modal')) {
                // 如果是直接访问此页面，而不是被嵌入，则显示弹窗
                modal.classList.add('active');
                
                // 初始化交互功能
                initAiModal();
            }
            
            // 初始化AI弹窗
            function initAiModal() {
                const modal = document.getElementById('ai-interpretation-modal');
                const closeBtn = document.getElementById('modal-close-btn');
                const chatContainer = document.getElementById('ai-chat-container');
                const inputField = document.getElementById('ai-input');
                const sendBtn = document.getElementById('ai-send-btn');
                const suggestionCards = document.querySelectorAll('.ai-suggestion-card');
                
                if (!modal || !closeBtn) return;
                
                // 关闭弹窗
                closeBtn.addEventListener('click', function() {
                    modal.classList.remove('active');
                    document.body.classList.remove('modal-open');
                });
                
                // 点击弹窗外部区域关闭弹窗
                modal.addEventListener('click', function(e) {
                    if (e.target === modal) {
                        modal.classList.remove('active');
                        document.body.classList.remove('modal-open');
                    }
                });
                
                // ESC键关闭弹窗
                document.addEventListener('keydown', function(e) {
                    if (e.key === 'Escape' && modal.classList.contains('active')) {
                        modal.classList.remove('active');
                        document.body.classList.remove('modal-open');
                    }
                });
                
                // 发送问题按钮点击事件
                if (sendBtn && inputField) {
                    sendBtn.addEventListener('click', function() {
                        sendQuestion();
                    });
                    
                    // 输入框回车发送
                    inputField.addEventListener('keypress', function(e) {
                        if (e.key === 'Enter') {
                            sendQuestion();
                        }
                    });
                }
                
                // 预设问题卡片点击事件
                if (suggestionCards) {
                    suggestionCards.forEach(card => {
                        card.addEventListener('click', function() {
                            const question = this.getAttribute('data-question');
                            if (question && inputField) {
                                inputField.value = question;
                                sendQuestion();
                            }
                        });
                    });
                }
                
                // 发送问题函数
                function sendQuestion() {
                    if (!inputField || !chatContainer) return;
                    
                    const question = inputField.value.trim();
                    if (!question) return;
                    
                    // 添加用户问题到对话
                    addMessage('user', question);
                    
                    // 清空输入框
                    inputField.value = '';
                    
                    // 显示AI正在输入状态
                    showAiTyping();
                    
                    // 模拟AI回答延迟
                    setTimeout(() => {
                        // 移除正在输入状态
                        removeAiTyping();
                        
                        // 根据问题提供回答
                        let answer = getAiResponse(question);
                        
                        // 添加AI回答到对话
                        addMessage('ai', answer);
                        
                        // 滚动到底部
                        scrollToBottom();
                    }, 1000);
                }
                
                // 添加消息到对话
                function addMessage(type, content) {
                    if (!chatContainer) return;
                    
                    const messageDiv = document.createElement('div');
                    messageDiv.className = 'ai-message';
                    
                    const divider = document.createElement('div');
                    divider.className = 'ai-divider';
                    chatContainer.appendChild(divider);
                    
                    if (type === 'user') {
                        messageDiv.innerHTML = `
                            <div class="user-message">用户：${content}</div>
                        `;
                    } else {
                        messageDiv.innerHTML = `
                            <div class="ai-message-content">
                                <div>AI：${content}</div>
                            </div>
                        `;
                    }
                    
                    chatContainer.appendChild(messageDiv);
                    scrollToBottom();
                }
                
                // 显示AI正在输入状态
                function showAiTyping() {
                    if (!chatContainer) return;
                    
                    const typingDiv = document.createElement('div');
                    typingDiv.className = 'ai-message ai-typing';
                    typingDiv.innerHTML = `
                        <div class="ai-message-content">
                            <div class="ai-loading">AI正在思考中</div>
                        </div>
                    `;
                    chatContainer.appendChild(typingDiv);
                    scrollToBottom();
                }
                
                // 移除AI正在输入状态
                function removeAiTyping() {
                    const typingDiv = document.querySelector('.ai-typing');
                    if (typingDiv) {
                        typingDiv.remove();
                    }
                }
                
                // 滚动到对话底部
                function scrollToBottom() {
                    if (chatContainer) {
                        chatContainer.scrollTop = chatContainer.scrollHeight;
                    }
                }
                
                // 根据问题获取AI回答
                function getAiResponse(question) {
                    // 模拟AI回答，实际应用中可以接入真实的AI服务
                    const responses = {
                        '高血压分级与治疗方案如何对应？': `根据2025年高血压诊疗指南，治疗方案与分级的对应关系如下：

1. 高正常血压(120-139/80-89 mmHg)：
   - 主要采取生活方式干预
   - 有心血管疾病高危因素者可考虑药物治疗

2. 1级高血压(140-159/90-99 mmHg)：
   - 生活方式干预
   - 单药治疗，首选长效降压药

3. 2级高血压(160-179/100-109 mmHg)：
   - 生活方式干预
   - 二联药物联合治疗

4. 3级高血压(≥180/≥110 mmHg)：
   - 生活方式干预
   - 三联药物联合治疗
   - 考虑转诊至上级医院`,
                        
                        '基层医疗机构应如何进行高血压随访管理？': `基层医疗机构的高血压随访管理建议如下：

1. 随访频率：
   - 血压未达标患者：2-4周随访一次
   - 血压达标患者：1-3个月随访一次
   - 稳定患者：3-6个月随访一次

2. 随访内容：
   - 测量血压、体重
   - 评估药物依从性
   - 评估生活方式改变情况
   - 询问不良反应

3. 定期检查（每6-12个月）：
   - 血常规、尿常规
   - 血糖、血脂、肝肾功能
   - 心电图`,
                        
                        '高血压一线用药有哪些选择？': `根据2025年高血压诊疗指南，高血压一线用药主要有以下几类：

1. 钙通道阻滞剂(CCB)：
   - 如氨氯地平、硝苯地平缓释剂
   - 适合老年人、单纯收缩期高血压患者

2. 血管紧张素转换酶抑制剂(ACEI)：
   - 如卡托普利、贝那普利
   - 适合合并糖尿病、心力衰竭、冠心病患者

3. 血管紧张素II受体拮抗剂(ARB)：
   - 如缬沙坦、氯沙坦
   - ACEI不耐受者的替代选择

4. 噻嗪类利尿剂：
   - 如氢氯噻嗪
   - 适合老年人、心力衰竭患者

5. β受体阻滞剂：
   - 如美托洛尔、比索洛尔
   - 适合合并冠心病、心律失常患者

指南强调应根据患者个体情况选择合适的药物，并推荐长效制剂以提高依从性。`
                    };
                    
                    // 检查是否有预设回答
                    if (responses[question]) {
                        return responses[question];
                    }
                    
                    // 通用回答
                    return `关于"${question}"，根据2025年高血压诊疗指南的内容，我需要进一步分析相关章节。建议您查阅指南的相关章节，或咨询专业医生获取更准确的信息。`;
                }
            }
        });
    </script>
</body>
</html>
